<template>
  <div class="box" ref="targetElement">
    <div class="search-box" ref="searchBox">
      <div class="search-top-box">
        <div class="search-top-left-box">
          <el-form label-width="110px" ref="div" :inline="true" :model="formSearch" @submit.native.prevent
            class="demo-form-inline">
            <template v-if="activeName == 1">
              <el-form-item label="收款类型">
                <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.payment_type"
                  placeholder="选择收款类型" class="form-width">
                  <el-option label="勘场费用" :value="1"></el-option>
                  <el-option label="预付款" :value="2"></el-option>
                  <el-option label="进度款" :value="3"></el-option>
                  <el-option label="尾款" :value="4"></el-option>
                  <el-option label="增项款" :value="5"></el-option>
                  <el-option label="定金" :value="6"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目名称">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_name"
                  placeholder="输入项目名称"></el-input>
              </el-form-item>
              <el-form-item label="项目品牌">
                <el-select @change="onSearch(1)" filterable clearable class="form-width" v-model="formSearch.brand_id"
                  placeholder="选择项目品牌">
                  <el-option v-for="(item, index) in brandList" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="收款日期">
                <el-date-picker class="form-width" @change="onSearch(1)" value-format="yyyy-MM-dd"
                  v-model="formSearch.review_at" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <template v-if="moreSearchShow">
                <el-form-item label="项目编号">
                  <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_number"
                    placeholder="输入项目名称"></el-input>
                </el-form-item>
                <el-form-item label="收款人">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.reviewer_id"
                    placeholder="选择收款人" class="form-width">
                    <el-option v-for="item in financeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="收款金额">
                  <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.amount_collected"
                    placeholder="输入收款金额"></el-input>
                </el-form-item>
                <el-form-item label="收款账户">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.receiving_account_id"
                    placeholder="选择收款账户" class="form-width">
                    <el-option v-for="item in companyList" :key="item.id" :label="item.account_name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="收款单状态">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.review_status"
                    placeholder="选择收款单状态" class="form-width">
                    <el-option label="待审核" :value="1"></el-option>
                    <el-option label="审核通过" :value="2"></el-option>
                    <el-option label="审核拒绝" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.remark"
                    placeholder="输入备注"></el-input>
                </el-form-item>
              </template>
            </template>
            <!-- 付款单 -->
            <template v-if="activeName == 2">
              <el-form-item label="付款类型">
                <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.pay_type" placeholder="选择付款类型"
                  class="form-width">
                  <el-option v-for="item in payTypeReceiveList" :key="item.id" :label="item.label" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目名称">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_name"
                  placeholder="输入项目名称名称"></el-input>
              </el-form-item>
              <el-form-item label="供应商">
                <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.supplier_id"
                  placeholder="选择关联供应商" class="form-width">
                  <el-option v-for="item in supplierList" :key="item.Id" :label="item.supplier_name" :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目编号">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_number"
                  placeholder="输入项目编号"></el-input>
              </el-form-item>
              <template v-if="moreSearchShow">
                <el-form-item label="关联采购结算单">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.settlement_id"
                    placeholder="选择关联结算单" class="form-width">
                    <el-option v-for="item in searchPurchaseSettlementList" :key="item.id" :label="item.bill_name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="申请金额">
                  <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.apply_amount"
                    placeholder="输入申请金额"></el-input>
                </el-form-item>
                <el-form-item label="收款账户">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.receive_id"
                    placeholder="选择收款账户" class="form-width">
                    <el-option v-for="item in receiveList" :key="item.id" :label="item.account_name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="付款账户">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.main_id"
                    placeholder="选择付款账户" class="form-width">
                    <el-option v-for="item in companyList" :key="item.id" :label="item.account_name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="付款状态">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.payment_status"
                    placeholder="选择付款状态" class="form-width">
                    <el-option label="待一级审核" :value="1">
                    </el-option>
                    <el-option label="待重新提交" :value="2">
                    </el-option>
                    <el-option label="待二级审核" :value="3">
                    </el-option>
                    <el-option label="待三级审核" :value="4">
                    </el-option>
                    <el-option label="待付款" :value="5">
                    </el-option>
                    <el-option label="已付款" :value="6">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.remarks"
                    placeholder="输入备注"></el-input>
                </el-form-item>
                <el-form-item label="申请人">
                  <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.apply_user_id"
                    placeholder="选择申请人" class="form-width">
                    <el-option v-for="item in financeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="申请时间">
                  <el-date-picker @change="onSearch(1)" class="form-width" value-format="yyyy-MM-dd"
                    v-model="formSearch.created_at" type="daterange" placeholder="选择日期" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </template>
            </template>
          </el-form>
        </div>
        <div class="search-top-right-box">
          <p @click="moreSearchFunc">
            {{ moreSearchShow ? "收起" : "展开"
            }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "></i>
          </p>
          <el-button type="primary" @click="onSearch(1)">查询</el-button>
          <!--  :disabled="userInfo.position_id != 2" -->
          <el-button v-if="(activeName == 1) && $isPer(permission, ['skd_add'])" type="primary"
            @click="addReceiptFunc">新增收款单</el-button>
          <el-button v-if="(activeName == 2) && $isPer(permission, ['fkd_add'])" type="primary"
            @click="addPaymentFunc">付款申请</el-button>
        </div>
      </div>
    </div>
    <!-- table -->
    <div class="page-list" ref="pageList" v-loading="pageLoading">
      <div class="list-top-box">
        <div class="tab-box">
          <el-tabs v-model="activeName" @tab-click="tabClickFunc">
            <el-tab-pane v-for="item in tabArr" :key="Number(item.name)" :label="item.label"
              :name="item.name"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-top-box-right">
          <el-checkbox style="margin-right: 20px;" v-model="to_do" @change="onSearch(1)">待处理</el-checkbox>
          <p class="list-top-box-left">
            已选<span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }}数据
          </p>
          <!-- --------------审核按钮（收款单）-------------------- -->
          <!-- 导出收款单 -->
          <el-button :disabled="tableData.length == 0" type="primary"
            v-if="(activeName == 1) && $isPer(permission, ['company_exportReceiptExcel'])"
            @click="exportReceiptExcelFunc">导出收款单</el-button>
          <!-- 客户总监 -->
          <el-button type="primary" :disabled="SKSHfunc(10)"
            v-if="(activeName == 1) && $isPer(permission, ['company_preliminaryExamination'])"
            @click="collectionPaymentsFunc">收款一审</el-button>
          <!-- 总经理 -->
          <el-button type="primary" :disabled="SKSHfunc(20)"
            v-if="(activeName == 1) && $isPer(permission, ['company_reexamineExamination'])"
            @click="collectionPaymentsFunc">收款二审</el-button>
          <!-- 财务 -->
          <el-button type="primary" :disabled="SKSHfunc(30)"
            v-if="(activeName == 1) && $isPer(permission, ['company_receiptReviewPassed'])"
            @click="collectionPaymentsFunc">收款确认</el-button>
          <!-- 重新提交 -->
          <el-button type="primary" :disabled="SKXGfunc"
            v-if="(activeName == 1) && $isPer(permission, ['paymentOrder_edit'])"
            @click="paymentOrderEditFunc">重新修改提交</el-button>

          <!-- --------------审核按钮（付款单）-------------------- -->
          <template v-if="(activeName == 2)">
            <!-- 导出付款单 -->
            <el-button :disabled="tableData.length == 0" type="primary"
              v-if="$isPer(permission, ['finance_exportPaymentOrder'])"
              @click="exportPaymentOrderFunc">导出付款单</el-button>
            <el-button type="primary"
              :disabled="multipleSelection.length != 1 || multipleSelection[0].payment_status != 1" @click="examineFunc"
              v-if="$isPer(permission, ['shfy_gcjlsh']) || $isPer(permission, ['kcf_gcjlsh']) || $isPer(permission, ['qtfy_gcjlsh']) || $isPer(permission, ['gck_gcjlsh']) || $isPer(permission, ['gystk_gcbjlsh']) || $isPer(permission, ['zxtk_khzjsh'])">付款一审</el-button>
            <el-button type="primary"
              :disabled="multipleSelection.length != 1 || multipleSelection[0].payment_status != 3" @click="examineFunc"
              v-if="$isPer(permission, ['shfy_zjysh']) || $isPer(permission, ['kcf_zjysh']) || $isPer(permission, ['qtfy_zjysh']) || $isPer(permission, ['gck_zjysh']) || $isPer(permission, ['gystk_zjlsh']) || $isPer(permission, ['zxtk_zjysh'])">付款二审</el-button>
            <el-button type="primary"
              :disabled="multipleSelection.length != 1 || multipleSelection[0].payment_status != 4" @click="examineFunc"
              v-if="$isPer(permission, ['shfy_cwsh']) || $isPer(permission, ['kcf_cwsh']) || $isPer(permission, ['qtfy_cwsh']) || $isPer(permission, ['gck_cwsh']) || $isPer(permission, ['gystk_cwsh']) || $isPer(permission, ['zxtk_cwsh'])">付款三审</el-button>
            <el-button type="primary"
              :disabled="multipleSelection.length != 1 || multipleSelection[0].payment_status != 5"
              @click="paySumitFunc"
              v-if="$isPer(permission, ['shfy_cnsh']) || $isPer(permission, ['kcf_cnsh']) || $isPer(permission, ['qtfy_cnsh']) || $isPer(permission, ['gck_cnsh']) || $isPer(permission, ['gystk_cnsh']) || $isPer(permission, ['zxtk_cnsh'])">付款确认</el-button>


          </template>
          <!-- 付款单重新提交 -->
          <el-button
            :disabled="multipleSelection.length != 1 || multipleSelection[0].payment_status != 2 || multipleSelection[0].apply_user_id != userInfo.userid"
            type="primary" v-if="(activeName == 2) && $isPer(permission, ['fkd_edit'])"
            @click="editFunc">重新修改提交</el-button>
        </div>
      </div>
      <template v-if="activeName == 1">
        <div class="table-box">
          <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row
            :header-cell-style="{
              background: '#FAFBFC',
              color: '#828A9D',
              textAlign: 'center',
            }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData" v-loading="tableLoading"
            @selection-change="handleSelectionChange" height="100%">
            <el-table-column type="selection" width="80"></el-table-column>
            <el-table-column min-width="140px" prop="" label="ID">
              <template slot-scope="scope">
                <template v-if="$isPer(permission, ['collectionPayment_skDetail'])">
                  <el-button type="text" @click.stop="detailFunc(scope.row)">{{
                    $assemblyListNo('SKD', scope.row.voucher_id) }}</el-button>
                </template>
                <template v-else>{{ $assemblyListNo('SKD', scope.row.voucher_id) }}</template>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_sklx')" min-width="110px" prop="payment_type" label="收款类型"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.payment_type == 1">勘场费用</span>
                <span v-if="scope.row.payment_type == 2">预付款</span>
                <span v-if="scope.row.payment_type == 3">进度款</span>
                <span v-if="scope.row.payment_type == 4">尾款</span>
                <span v-if="scope.row.payment_type == 5">增项款</span>
                <span v-if="scope.row.payment_type == 6">定金</span>
                <span v-if="!scope.row.payment_type">--</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_xmbh')" min-width="130px" prop="project_number" label="项目编号"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.project_number || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_xmmc')" min-width="180px" prop="project_name" label="项目名称"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.project_name || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_xmpp')" min-width="120px" prop="brand_name" label="项目品牌"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag v-if="scope.row.brand_name" :color="`${scope.row.brand_colour}`" style="color: #ffffff;">
                  {{ scope.row.brand_name }}
                </el-tag>
                <span v-else>{{ scope.row.brand_name }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skr')" min-width="120px" prop="reviewer" label="收款人"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.submitter || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skrq')" min-width="170px" prop="review_at" label="收款日期"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.review_at || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skje')" min-width="110px" prop="amount_collected" label="收款金额"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.amount_collected }}元
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skzh')" min-width="180px" prop="receiving_account" label="收款账户"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.receiving_account || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skdzt')" min-width="100px" prop="review_status" label="收款单状态"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.review_status == 1">待审核</span>
                <span v-if="scope.row.review_status == 2">审核通过</span>
                <span v-if="scope.row.review_status == 3">审核拒绝</span>
                <span v-if="!scope.row.review_status">--</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skpz')" min-width="90px" prop="voucher_file" label="收款凭证">
              <template slot-scope="scope">
                <div class="img-list-box">
                  <el-image class="img-box" v-for="(item, index) in scope.row.voucher_file" :key="index"
                    :src="$fileImgFunc(item)" @click="$fileViewHandle(item)">
                  </el-image>
                </div>
                <span v-if="!scope.row.voucher_file || !scope.row.voucher_file.length">--</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_sktjsksj')" min-width="180px" prop="created_at" label="提交收款单时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.created_at || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skbz')" min-width="180px" prop="remark" label="备注"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.remark || '--' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-if="activeName == 2">
        <div class="table-box">
          <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row
            :header-cell-style="{
              background: '#FAFBFC',
              color: '#828A9D',
              textAlign: 'center',
            }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData" v-loading="tableLoading"
            @selection-change="handleSelectionChange" height="100%">
            <el-table-column type="selection" width="80"></el-table-column>
            <el-table-column min-width="140px" prop="" label="ID">
              <template slot-scope="scope">
                <el-button v-if="$isPer(permission, ['collectionPayment_fkDetail'])" type="text"
                  @click.stop="detailFunc(scope.row)">{{ $assemblyListNo('CGDD', scope.row.id) }}</el-button>
                <span v-else>{{ $assemblyListNo('CGDD', scope.row.id) }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_fklx')" min-width="180px" prop="pay_type_name" label="付款类型"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.pay_type_name || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_xmmc')" min-width="180px" prop="project_name" label="项目名称"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.project_name || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_xmbh')" min-width="180px" prop="project_number" label="项目编号"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.project_number || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_glcgjsd')" min-width="180px" prop="bill_name" label="关联采购结算单"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <template v-if="scope.row.pay_type == 2">
                  <span>{{ scope.row.bill_name || '--' }}</span>
                </template>
                <template v-else>--</template>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_gys')" min-width="180px" prop="supplier_name" label="供应商"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <template v-if="scope.row.pay_type == 2">
                  <span>{{ scope.row.supplier_name || '--' }}</span>
                </template>
                <template v-else>--</template>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_sqje')" min-width="180px" prop="apply_amount" label="申请金额"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.apply_amount ? scope.row.apply_amount + '元' : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_skzh2')" min-width="180px" prop="receive_name" label="收款账户"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.receive_name || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_fkzh')" min-width="180px" prop="main_name" label="付款账户"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.main_name || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_fkzt')" min-width="180px" prop="payment_status" label="付款状态"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <template>
                  <span v-if="scope.row.payment_status == 1">待审核</span>
                  <span v-if="scope.row.payment_status == 2">待重新提交</span>
                  <span v-if="scope.row.payment_status == 3">待审核</span>
                  <span v-if="scope.row.payment_status == 4">待审核</span>
                  <span v-if="scope.row.payment_status == 5">已通过，未付款</span>
                  <span v-if="scope.row.payment_status == 6">已付款</span>
                  <span v-if="!scope.row.payment_status">--</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_fkbz')" min-width="180px" prop="remarks" label="备注"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.remarks || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_ssqr')" min-width="180px" prop="name" label="申请人"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.name || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('sfk_sqsj')" min-width="180px" prop="created_at" label="申请时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.created_at || '--' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <div class="page-footer">
        <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
          @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 新增付款单 -->
    <el-dialog :modal-append-to-body="false" :before-close="cancelPaymentFunc" destroy-on-close
      :title="formInlinePayment.id ? '重新提交付款单' : '付款申请'" :visible.sync="dialogVisiblePayment" width="600px">
      <el-form :rules="rulesPayment" ref="ruleFormPayment" :model="formInlinePayment" label-width="100px"
        label-position="left" :key="formInlinePayment.pay_type">
        <el-form-item label="付款类型" prop="pay_type">
          <el-select filterable :disabled="!!formInlinePayment.id" @change="payTypeChangeFunc" clearable
            v-model="formInlinePayment.pay_type" placeholder="选择付款类型" class="form-width2">
            <el-option v-for="item in payTypeReceiveList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" v-if="formInlinePayment.pay_type"
          :prop="formInlinePayment.pay_type == 2 ? '' : 'project_id'">
          <el-select :disabled="!!formInlinePayment.id" filterable clearable v-model="formInlinePayment.project_id"
            placeholder="选择项目名称" class="form-width2">
            <el-option v-for="item in projectList" :key="item.id" :label="item.project_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联供应商" prop="supplier_id" v-if="formInlinePayment.pay_type == 2">
          <el-select filterable @change="supplierChange" clearable v-model="formInlinePayment.supplier_id"
            placeholder="选择关联供应商" class="form-width2">
            <el-option v-for="item in supplierList" :key="item.Id" :label="item.supplier_name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 供应商退款 -->
        <el-form-item label="关联结算单" prop="settlement_id"
          v-if="formInlinePayment.pay_type == 2 && formInlinePayment.supplier_id">
          <el-select filterable clearable v-model="formInlinePayment.settlement_id" placeholder="选择关联结算单"
            class="form-width2">
            <el-option v-for="item in purchaseSettlementList" :key="item.id" :label="item.bill_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请金额" prop="apply_amount">
          <el-input v-input-limit="2" clearable class="form-width2" v-model="formInlinePayment.apply_amount"
            placeholder="输入申请金额"></el-input>
        </el-form-item>
        <el-form-item label="往来账户" prop="receive_id">
          <el-select filterable clearable v-model="formInlinePayment.receive_id" placeholder="选择往来账户"
            class="form-width2">
            <el-option v-for="item in receiveList" :key="item.id" :label="item.account_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主体账户" :prop="formInlinePayment.pay_type == 1 ? '' : 'main_id'">
          <el-select filterable clearable v-model="formInlinePayment.main_id" placeholder="选择主体账户" class="form-width2">
            <el-option v-for="item in companyList" :key="item.id" :label="item.account_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款事由" prop="apply_type" v-if="formInlinePayment.pay_type == 1">
          <el-select filterable clearable v-model="formInlinePayment.apply_type" placeholder="选择付款事由"
            class="form-width2">
            <el-option v-for="item in applyTypeList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input clearable class="form-width2" v-model="formInlinePayment.desc" placeholder="输入备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPaymentFunc" :loading="addLoading">提交</el-button>
        <el-button @click="cancelPaymentFunc" :loading="addLoading">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 新增收款单 -->
    <el-dialog :modal-append-to-body="false" :before-close="cancelReceiptFunc" destroy-on-close
      :title="`${formInlineReceipt.voucher_id ? '编辑' : '新增'}收款单`" :visible.sync="dialogVisibleReceipt" width="600px">
      <el-form :rules="rulesReceipt" ref="ruleFormReceipt" :model="formInlineReceipt" label-width="100px"
        label-position="left" :key="formInlineReceipt.payment_type">
        <el-form-item label="付款类型" prop="payment_type">
          <el-select filterable @change="paymentTypeChangeFunc" clearable v-model="formInlineReceipt.payment_type"
            placeholder="选择付款类型" class="form-width2">
            <el-option v-for="item in payTypeList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="project_id" v-if="formInlineReceipt.payment_type">
          <el-select @change="SKprojectChangeFunc" filterable clearable v-model="formInlineReceipt.project_id"
            placeholder="选择项目名称" class="form-width2">
            <el-option v-for="item in projectList" :key="item.id" :label="item.project_name" :value="item.id">
            </el-option>
          </el-select>
          <template v-if="formInlineReceipt.payment_type == 4 && formInlineReceipt.settlementMsg">
            <div>
              <span style="color: #606266;">结算单：{{ formInlineReceipt.settlementMsg.settlement_number }}</span>
              <el-button style="padding: 0 0 0 10px;" type="text" @click="goSettlementMsFunc">查看详情</el-button>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="项目已收款" v-if="formInlineReceipt.project_id">
          <el-input disabled class="form-width2" v-model="formInlineReceipt.paid_amount" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="项目未收款" v-if="formInlineReceipt.project_id">
          <el-input disabled class="form-width2" v-model="formInlineReceipt.unpaid_amount" placeholder=""></el-input>
        </el-form-item>
        <!--  prop="change_id" -->
        <el-form-item label="增款项" v-if='formInlineReceipt.payment_type == 5' prop="change_id">
          <el-select filterable clearable v-model="formInlineReceipt.change_id" placeholder="选择增款项" class="form-width2">
            <el-option v-for="item in changeList" :key="item.id" :label="item.change_number" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款金额" prop="amount_collected">
          <el-input v-input-limit="2" clearable class="form-width2" v-model="formInlineReceipt.amount_collected"
            placeholder="输入收款金额"></el-input>
        </el-form-item>
        <el-form-item label="收款账户" prop="receiving_account_id">
          <el-select filterable clearable v-model="formInlineReceipt.receiving_account_id" placeholder="选择付款类型"
            class="form-width2">
            <el-option v-for="item in companyList" :key="item.id" :label="item.account_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input clearable class="form-width2" v-model="formInlineReceipt.remark" placeholder="输入备注"></el-input>
        </el-form-item>
        <el-form-item label="支付凭证" prop="payment_voucher">
          <div class="file-list-box">
            <div class="file-item-box" v-for="(item, index) in formInlineReceipt.payment_voucher" :key="index">
              <div class="el-icon-delete-box" @click="delFileFunc(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <el-image fit="cover" class="img" :src="$fileImgFunc(item)" :preview-src-list="[$fileImgFunc(item)]">
                </el-image>
              </el-tooltip>
            </div>

            <el-upload accept="image/*" class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
              list-type="picture-card" :on-change="paymentVoucherFileFunc">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReceiptFunc" :loading="addLoading">提交</el-button>
        <el-button @click="cancelReceiptFunc" :loading="addLoading">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 导出付款单 -->
    <el-dialog :modal-append-to-body="false" title="导出付款单字段选择" :visible.sync="exportPaymentOrderVisible" width="680px"
      :before-close="exportPaymentOrderCloseFunc">
      <el-checkbox class="checkbox-item" v-model="allChecked" @change="allCheckedChangeFunc">全选</el-checkbox>
      <div v-loading="exportPaymentOrderLoading" class="export-scroll">
        <el-checkbox-group v-model="exportPaymentOrderVal">
          <el-checkbox class="checkbox-item" v-for="(item, index) in exportPaymentOrderArr" :key="index"
            :label="item.label" border></el-checkbox>
        </el-checkbox-group>
      </div>
      <p v-if="exportPaymentOrderUrl">导出文件链接：<el-button @click="$openUrlFunc(exportPaymentOrderUrl[0])" type="text">{{
        exportPaymentOrderUrl[1]
      }}</el-button></p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportPaymentOrderSubmitFunc">提交</el-button>
        <el-button @click="exportPaymentOrderCloseFunc">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 导出收款单 -->
    <el-dialog :modal-append-to-body="false" title="导出收款单字段选择" :visible.sync="exportReceiptExcelVisible" width="680px"
      :before-close="exportReceiptExcelCloseFunc">
      <el-checkbox class="checkbox-item" v-model="allChecked" @change="allCheckedChangeFunc">全选</el-checkbox>
      <div v-loading="exportReceiptExcelLoading" class="export-scroll">
        <el-checkbox-group v-model="exportReceiptExcelVal">
          <el-checkbox class="checkbox-item" v-for="(item, index) in exportReceiptExcelArr" :key="index"
            :label="item.label" border></el-checkbox>
        </el-checkbox-group>
      </div>
      <p v-if="exportReceiptExcelUrl">导出文件链接：<el-button @click="$openUrlFunc(exportReceiptExcelUrl[0])" type="text">{{
        exportReceiptExcelUrl[1]
      }}</el-button></p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportReceiptExcelSubmitFunc">提交</el-button>
        <el-button @click="exportReceiptExcelCloseFunc">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonApi from "@/api/common";
import { getUserInfo } from "@/utils/auth";
import companyApi from "@/api/companyApi";
import financeApi from "@/api/financeApi";
import purchaseApi from "@/api/purchaseApi";
import preSettlementApi from "@/api/preSettlementApi";
import increaseDecreaseItemsApi from "@/api/increaseDecreaseItemsApi";
import brandApi from "@/api/brandApi";
import adminApi from "@/api/adminApi";
import { fkPayListFieldArr, skPayListFieldArr } from '@/utils/exportField';
export default {
  name: "collectionPaymentManagement",
  components: {},
  data() {
    var validatepayment_voucher = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择支付凭证'));
      } else {
        callback();
      }
    };
    return {
      tabArr: [{
        label: '收款单',
        name: '1',
      }, {
        label: '付款单',
        name: '2',
      }],
      to_do: false,//是否待处理
      // 导出收款单
      exportReceiptExcelVisible: false,//导出弹窗
      exportReceiptExcelLoading: false,//导出loading
      exportReceiptExcelUrl: '',//导出链接
      exportReceiptExcelVal: [],//勾选导出字段列表
      exportReceiptExcelArr: skPayListFieldArr,
      activeName: "1",
      tableLoading: false,
      userInfo: "",
      page: 1,
      tableData: [],
      formSearch: {
        // 收款单
        reviewer_id: "",
        review_at: "",
        amount_collected: "",
        receiving_account_id: "",
        remark: "",
        // 付款单
        pay_type: "",
        project_id: "",
        settlement_id: "",
        supplier_id: "",
        receive_id: "",
        main_id: "",
        payment_status: "",
        apply_type: "",
        apply_user_id: "",
        remarks: "",
      },
      moreSearchShow: false,
      page: 1,
      num: 10,
      total: 0,
      addLoading: false,
      pageLoading: false,
      multipleSelection: [],
      // 新增付款单
      dialogVisiblePayment: false,
      formInlinePayment: {
        pay_type: "",
        project_id: "",
        settlement_id: "",
        apply_amount: "",
        receive_id: "",
        main_id: "",
        desc: "",
        apply_type: "",
        supplier_id: "",
      },
      rulesPayment: {
        supplier_id: [{ required: true, message: '请选择供应商', trigger: 'change' },],
        pay_type: [
          { required: true, message: '请选择付款类型', trigger: 'change' },
        ],
        project_id: [
          { required: true, message: '请选择项目名称', trigger: 'change' },
        ],
        settlement_id: [
          { required: true, message: '请选择关联结算单', trigger: 'change' },
        ],
        receive_id: [
          { required: true, message: '请选择往来账户', trigger: 'change' },
        ],
        main_id: [
          { required: true, message: '请选择主体账户', trigger: 'change' },
        ],
        apply_type: [
          { required: true, message: '请选择付款事由', trigger: 'change' },
        ],
        apply_amount: [
          { required: true, message: '请输入申请金额', trigger: 'change' },
        ],
      },
      payTypeList: [{
        id: 1,
        label: '勘场费用',
        // status_arr: [1020],
      }, {
        id: 2,
        label: '预付款',
        // status_arr: [1105],
      }, {
        id: 3,
        label: '进度款',
        // progress_payment: 1
      }, {
        id: 4,
        label: '尾款',
      }, {
        id: 5,
        label: '增项款',
        // additional_payment: 1
      }, {
        id: 6,
        label: '定金',
        less_status: 1105,
      }],//收款单类型
      payTypeReceiveList: [{
        id: 1,
        label: '工程款'
      }, {
        id: 2,
        label: '供应商货款'
      }, {
        id: 3,
        label: '装修退款'
      }, {
        id: 4,
        label: '售后费用'
      }, {
        id: 5,
        label: '勘场费'
      }, {
        id: 6,
        label: '其他费用'
      }],//付款单类型
      projectList: [],//项目列表添加用
      purchaseSettlementList: [],//结算单列表
      searchPurchaseSettlementList: [],//结算单筛选列表
      applyTypeList: [{
        id: 1,
        label: "基准首付款(40%)"
      }, {
        id: 2,
        label: "过程验收款(20%)"
      }, {
        id: 3,
        label: "设备调试款(30%)"
      }, {
        id: 4,
        label: "基准尾款(10%)"
      }, {
        id: 5,
        label: "增项基准(100%)"
      }],//付款事由
      // 新增收款单
      formInlineReceipt: {
        project_id: "",
        payment_type: "",
        amount_collected: "",
        remark: "",
        receiving_account_id: "",
        payment_voucher: [],
        change_id: "",
        settlementMsg: '',
        unpaid_amount: '',
        paid_amount: ''
      },
      changeList: [],//增款项列表
      rulesReceipt: {
        project_id: [
          { required: true, message: '请选择项目名称', trigger: 'change' },
        ],
        payment_type: [
          { required: true, message: '请选择付款类型', trigger: 'change' },
        ],
        amount_collected: [{ required: true, message: '请输入收款金额', trigger: 'change' },],
        receiving_account_id: [
          { required: true, message: '请选择收款账户', trigger: 'change' },
        ],
        change_id: [{ required: true, message: '请选择增款项', trigger: 'change' }],
        payment_voucher: [
          { required: true, validator: validatepayment_voucher, trigger: 'change' },
        ],
      },
      dialogVisibleReceipt: false,
      companyList: [],//收款账户列表
      receiveList: [],//往来款账户
      supplierList: [],//供应商列表
      examineFormInline: {
        desc: "",
        radio: 1,
      },//拒绝弹窗form
      // 导出付款单
      exportPaymentOrderVal: [],
      exportPaymentOrderVisible: false,
      exportPaymentOrderArr: fkPayListFieldArr,
      allChecked: false,//是否全选,
      exportPaymentOrderUrl: '',//导出付款单链接s
      exportPaymentOrderLoading: false,//导出loading
      searchProjectList: [],//项目列表（筛选用）
      brandList: [],//品牌列表（筛选用）
      financeList: [],//用户列表（筛选用）
      permission: [],//操作权限
    };
  },
  watch: {},
  computed: {
    // 收款修改提交
    SKXGfunc() {
      let multipleSelection = this.multipleSelection;
      if (multipleSelection.length == 1 &&
        multipleSelection[0].review_status == 3) {
        return false;
      } else {
        return true;
      }
    },
  },
  activated() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    this.onSearch();
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  deactivated() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  mounted() {
    console.log(this.$fieldShowFunc('sfk_skzh'), "this.$fieldShowFunc('sfk_skzh')")
    // 通过字段权限判断是否显示收款单OR付款单
    if (!this.$fieldShowFunc('sfk_sklx') &&
      !this.$fieldShowFunc('sfk_skr') &&
      !this.$fieldShowFunc('sfk_skrq') &&
      !this.$fieldShowFunc('sfk_skje') &&
      !this.$fieldShowFunc('sfk_skzh') &&
      !this.$fieldShowFunc('sfk_skdzt') &&
      !this.$fieldShowFunc('sfk_skpz') &&
      !this.$fieldShowFunc('sfk_skbz')) {
      this.activeName = '2';
      this.tabArr.splice(0, 1);
    }
    if (!this.$fieldShowFunc('sfk_fklx') &&
      !this.$fieldShowFunc('sfk_glcgjsd') &&
      !this.$fieldShowFunc('sfk_gys') &&
      !this.$fieldShowFunc('sfk_sqje') &&
      !this.$fieldShowFunc('sfk_skzh2') &&
      !this.$fieldShowFunc('sfk_fkzh') &&
      !this.$fieldShowFunc('sfk_fkzt') &&
      !this.$fieldShowFunc('sfk_fkbz') &&
      !this.$fieldShowFunc('sfk_ssqr') &&
      !this.$fieldShowFunc('sfk_sqsj')) {
      this.activeName = '1';
      this.tabArr.splice(1, 1);
    }

    this.$nextTick(() => {
      this.handleResize();
      // 监听窗口大小变化事件
      window.addEventListener('resize', this.handleResize);
      // 操作权限
      this.$getHtmlAuthority(this.$route.path).then(res => {
        console.log(res, "getHtmlAuthority");
        this.permission = res.data.permission;
      })
      this.userInfo = getUserInfo();
      console.log(getUserInfo(), '用户信息')
      this.getPurchaseSettlement({
        page: 1,
        num: 999
      });//结算单列表
      this.getCompanyList(1);//主体账户列表
      this.getCompanyList(2);//往来账户列表
      this.getSupplier();//供应商列表

      // this.selectProjectList({});//项目列表
      this.getBrandList();//品牌列表
      this.getAdminList();//财务列表

      this.hrefQueryFunc(() => {
        if (this.activeName == 1) {
          this.getReceiptList();//收款单列表
        } else {
          this.getPaymentOrder();//付款单列表
        }
      })
    })
  },
  methods: {
    // 收款审核 && this.userInfo.position_id == 9
    SKSHfunc(voucher_status) {
      let multipleSelection = this.multipleSelection;
      if (multipleSelection.length == 1 &&
        multipleSelection[0].voucher_status == voucher_status) {
        return false;
      } else {
        return true;
      }
    },
    handleResize() {
      const target = this.$refs.targetElement;
      const searchBox = this.$refs.searchBox;
      const pageList = this.$refs.pageList;
      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver(entries => {
        setTimeout(() => {
          console.log('元素变为:', searchBox.offsetHeight);
          // searchBox.offsetHeight + 'px'
          pageList.style.height = 'calc(100% - ' + (searchBox.offsetHeight + 15) + 'px)';
        }, 0);
      });
      // 开始观察目标元素
      resizeObserver.observe(target);

      // 存储 resizeObserver 实例，以便在组件销毁时停止观察
      this.resizeObserver = resizeObserver;
    },
    // 收款单  被拒绝  重新提交
    paymentOrderEditFunc() {
      let data = this.multipleSelection[0];
      console.log(data)
      this.formInlineReceipt = {
        voucher_id: data.voucher_id,
        project_id: data.project_id || "",
        payment_type: data.payment_type || "",
        amount_collected: data.amount_collected || "",
        remark: data.remark || "",
        receiving_account_id: data.receiving_account_id || "",
        payment_voucher: data.voucher_file || [],
        change_id: data.change_id || "",
        delete_arr: [],
        unpaid_amount: '',
        paid_amount: ''
      }
      let index = this.payTypeList.findIndex(item => {
        return item.id == data.payment_type;
      })
      this.selectProjectList(this.payTypeList[index], {
        project_id: data.project_id,
        project_name: data.project_name
      });
      // 增项款
      if (data.payment_type == 5) {
        // 增项款获取增减项列表
        this.getChangeList(data.project_name);//增项列表
      }

      // 获取项目已收未收
      commonApi.selectProjectDetails({ project_id: data.project_id }).then(res => {
        console.log(res, "项目详情")
        if (res.code == 200) {
          this.formInlineReceipt.unpaid_amount = res.data.unpaid_amount || '0';//未收
          this.formInlineReceipt.paid_amount = res.data.paid_amount || '0';//已收
          console.log(this.formInlineReceipt)
        }
      })
      this.dialogVisibleReceipt = true;
    },
    // 修改收款单
    updReceipt(obj) {
      companyApi.updReceipt(obj).then(res => {
        console.log(res, "修改收款单")
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getReceiptList();
          this.cancelReceiptFunc();
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    // 新增付款单   付款类型选择
    payTypeChangeFunc(type) {
      this.selectProjectList({
        less_status: 1500
      });//项目列表
    },
    // 跳转判断的
    hrefQueryFunc(cb) {
      let query = this.$route.query;
      if (JSON.stringify(query) != "{}") {
        console.log(query, "queryqueryqueryqueryquery")
        this.formSearch.project_name = query.project_name || '';//筛选项目名
        this.formSearch.payment_type = Number(query.payment_type) || '';//筛选付款类型
        this.formSearch.review_status = Number(query.review_status) || '';//筛选审核状态
        this.activeName = query.activeName || '1';//收款单OR付款单
        this.to_do = query.to_do ? query.to_do == '1' : false;//是否待处理
      }
      cb && cb();
    },
    // ------------------------------------收款单项目选择--------------------------------------
    SKprojectChangeFunc(e) {
      console.log(e)
      let index = this.projectList.findIndex(item => {
        return item.id == e;
      })
      if (index == -1) {
        this.formInlineReceipt.settlementMsg = '';
        this.formInlineReceipt.receiving_account_id = '';
        this.formInlineReceipt.change_id = '';
        this.ChangeList = [];
        return;
      }
      this.formInlineReceipt.receiving_account_id = this.projectList[index].receiving_account_id || '';
      this.formInlineReceipt.change_id = '';
      if (this.formInlineReceipt.payment_type == 4) {
        // 尾款获取结算单列表
        this.getSettlementList(this.projectList[index].project_name);
      }
      if (this.formInlineReceipt.payment_type == 5) {
        // 增项款获取增减项列表
        this.getChangeList(this.projectList[index].project_name);//增项列表
      }
      // 获取项目已收未收
      commonApi.selectProjectDetails({ project_id: e }).then(res => {
        console.log(res, "项目详情")
        if (res.code == 200) {
          this.formInlineReceipt.unpaid_amount = res.data.unpaid_amount || '0';//未收
          this.formInlineReceipt.paid_amount = res.data.paid_amount || '0';//已收
          console.log(this.formInlineReceipt)
        }
      })
    },
    // 结算列表
    getSettlementList(project_name) {
      preSettlementApi.getSettlementList({
        page: 1,
        num: 10,
        project_name
      }).then(res => {
        console.log(res, "结算列表")
        if (res.code == 200) {
          this.formInlineReceipt.settlementMsg = res.data.list[0];
        }
      })
    },
    // ------------------------------------账户列表--------------------------------------
    getCompanyList(account_type) {
      companyApi.getCompanyList({
        page: 1,
        num: 999,
        account_type
      }).then(res => {
        console.log(res, account_type == 1 ? "主体账户列表" : "往来账户")
        if (res.code == 200) {
          switch (account_type) {
            case 1:
              this.companyList = res.data.list;
              break;
            case 2:
              this.receiveList = res.data.list;
              break;
          }
        }
      })
    },
    // ------------------------------------支付凭证文件选择--------------------------------------
    delFileFunc(index) {
      // let delete_arr = [];
      let formInlineReceipt = this.formInlineReceipt;
      if (formInlineReceipt.payment_voucher[index].file_id) {
        formInlineReceipt.delete_arr.push(formInlineReceipt.payment_voucher[index]);
      }
      formInlineReceipt.payment_voucher.splice(index, 1);
      this.formInlineReceipt = formInlineReceipt;
    },
    paymentVoucherFileFunc(e) {
      let formInlineReceipt = this.formInlineReceipt;
      if (formInlineReceipt.payment_voucher.length && formInlineReceipt.payment_voucher[0].file_id) {
        formInlineReceipt.delete_arr.push(formInlineReceipt.payment_voucher[0]);
      }
      formInlineReceipt.payment_voucher = [e];
      this.formInlineReceipt = formInlineReceipt;
    },
    // ------------------------------------新增收款单--------------------------------------
    addReceiptFunc() {
      this.dialogVisibleReceipt = true;
    },
    cancelReceiptFunc() {
      this.formInlineReceipt = {
        project_id: "",
        payment_type: "",
        amount_collected: "",
        remark: "",
        receiving_account_id: "",
        payment_voucher: [],
        change_id: "",
        settlementMsg: '',
        unpaid_amount: '',
        paid_amount: ''
      }
      this.dialogVisibleReceipt = false;
    },
    submitReceiptFunc() {
      let formInlineReceipt = this.formInlineReceipt;
      let changeList = this.changeList;//增项列表
      let payTypeList = this.payTypeList;//付款类型
      let projectList = this.projectList;//项目列表
      let companyList = this.companyList;//收款账户
      console.log(formInlineReceipt, "formInlineReceipt")
      this.$refs.ruleFormReceipt.validate((valid) => {
        if (valid) {
          let formdata = new FormData();
          // 增项款编号
          let index1 = changeList.findIndex(item => {
            return item.id == formInlineReceipt.change_id;
          })
          // 付款类型名称
          let index2 = payTypeList.findIndex(item => {
            return item.id == formInlineReceipt.payment_type;
          })
          // 项目名
          let index3 = projectList.findIndex(item => {
            return item.id == formInlineReceipt.project_id;
          })
          // 收款账户
          let index4 = companyList.findIndex(item => {
            return item.id == formInlineReceipt.receiving_account_id;
          })

          let data = {
            amount_collected: formInlineReceipt.amount_collected,
            payment_type: formInlineReceipt.payment_type,
            payment_name: index2 != -1 ? payTypeList[index2].label : "",
            project_id: formInlineReceipt.project_id,
            project_name: index3 != -1 ? projectList[index3].project_name : "",
            receiving_account_id: formInlineReceipt.receiving_account_id,
            account_name: index4 != -1 ? companyList[index4].account_name : "",
            remark: formInlineReceipt.remark,
            change_id: formInlineReceipt.change_id,
            change_number: index1 != -1 ? changeList[index1].change_number : "",
          }
          for (let i = 0; i < formInlineReceipt.payment_voucher.length; i++) {
            if (formInlineReceipt.payment_voucher[i].raw) {
              formdata.append('payment_voucher[]', formInlineReceipt.payment_voucher[i].raw);
            } else {
              data.payment_voucherOld = formInlineReceipt.payment_voucher;
            }
          }
          if (formInlineReceipt.voucher_id) {
            // 修改
            data.voucher_id = formInlineReceipt.voucher_id;
            data.delete_arr = formInlineReceipt.delete_arr;

            formdata.append('data', JSON.stringify(data));
            this.updReceipt(formdata);
            return;
          }
          formdata.append('data', JSON.stringify(data));
          this.addReceipt(formdata);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addReceipt(obj) {
      this.addLoading = true;
      companyApi.addReceipt(obj).then(res => {
        console.log(res, "添加收款单")
        this.addLoading = false;
        if (res.code == 200) {
          this.onSearch(1);
          this.cancelReceiptFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // ------------------------------------结算单列表--------------------------------------
    getPurchaseSettlement(obj) {
      purchaseApi.getPurchaseSettlement(obj).then(res => {
        console.log(res, "结算单列表")
        if (res.code == 200) {
          if (obj.supplier_id) {
            this.purchaseSettlementList = res.data.list;
          } else {
            this.searchPurchaseSettlementList = res.data.list;
          }
        }
      })
    },
    // ------------------------------------项目列表--------------------------------------
    selectProjectList(obj, projectData) {
      this.projectList = [];
      commonApi.selectProjectList(obj).then(res => {
        console.log(res, "项目列表", projectData)
        if (res.code == 200) {
          // 修改收款单时候才会用到
          if (projectData) {
            let index = res.data.findIndex(item => {
              return item.id == projectData.project_id;
            })
            if (index == -1) {
              res.data.push({
                id: projectData.project_id,
                project_name: projectData.project_name
              });
            }
          }
          this.projectList = res.data;
          // 全部获取一次
          if (!this.searchProjectList.length) {
            this.searchProjectList = res.data;
          }
        }
      })
    },
    // ------------------------------------新增付款单--------------------------------------
    addPaymentFunc() {
      this.dialogVisiblePayment = true;
    },
    cancelPaymentFunc() {
      this.formInlinePayment = {
        pay_type: "",
        project_id: "",
        settlement_id: "",
        apply_amount: "",
        receive_id: "",
        main_id: "",
        desc: "",
        apply_type: "",
        supplier_id: ""
      }
      this.dialogVisiblePayment = false;
    },
    submitPaymentFunc() {
      let formInlinePayment = this.formInlinePayment;
      let payTypeReceiveList = this.payTypeReceiveList;
      console.log(formInlinePayment, "formInlinePayment")
      this.$refs.ruleFormPayment.validate((valid) => {
        if (valid) {
          // 付款类型
          let index = payTypeReceiveList.findIndex(item => {
            return item.id == formInlinePayment.pay_type;
          })
          // 供应商
          let index2 = this.supplierList.findIndex(item => {
            return item.Id == formInlinePayment.supplier_id;
          })
          // 采购结算单
          let index3 = this.purchaseSettlementList.findIndex(item => {
            return item.id == formInlinePayment.settlement_id;
          })
          // 主体账户
          let index4 = this.companyList.findIndex(item => {
            return item.id == formInlinePayment.main_id
          })
          // 往来账户
          let index5 = this.receiveList.findIndex(item => {
            return item.id == formInlinePayment.receive_id;
          })
          let index6 = this.applyTypeList.findIndex(item => {
            return item.id == formInlinePayment.apply_type;
          })
          // 项目
          let index8 = this.projectList.findIndex(item => {
            return formInlinePayment.project_id == item.id;
          })
          // 更新
          if (formInlinePayment.id) {
            this.updatePaymentOrder({
              pay_type_name: payTypeReceiveList[index].label,
              pay_type: formInlinePayment.pay_type,
              project_id: formInlinePayment.project_id,
              project_name: index8 != -1 ? this.projectList[index8].project_name : '',
              settlement_id: formInlinePayment.settlement_id,
              apply_amount: formInlinePayment.apply_amount,
              receive_id: formInlinePayment.receive_id,
              main_id: formInlinePayment.main_id,
              desc: formInlinePayment.desc || '',
              apply_type: formInlinePayment.apply_type,
              supplier_id: formInlinePayment.supplier_id,
              supplier_name: index2 != -1 ? this.supplierList[index2].supplier_name : "",
              settlement_num: index3 != -1 ? this.purchaseSettlementList[index3].bill_name : "",
              main_name: index4 != -1 ? this.companyList[index4].account_name : "",
              receive_name: index5 != -1 ? this.receiveList[index5].account_name : "",
              main_num: index4 != -1 ? this.companyList[index4].account_number : "",
              receive_num: index5 != -1 ? this.receiveList[index5].account_number : "",
              apply_type_name: index6 != -1 ? this.applyTypeList[index6].label : "",
              payment_id: formInlinePayment.id,
            });
            return;
          }
          this.addPaymentOrder({
            pay_type_name: payTypeReceiveList[index].label,
            pay_type: formInlinePayment.pay_type,
            project_id: formInlinePayment.project_id,
            project_name: index8 != -1 ? this.projectList[index8].project_name : '',
            settlement_id: formInlinePayment.settlement_id,
            apply_amount: formInlinePayment.apply_amount,
            receive_id: formInlinePayment.receive_id,
            main_id: formInlinePayment.main_id,
            desc: formInlinePayment.desc || '',
            apply_type: formInlinePayment.apply_type,
            supplier_id: formInlinePayment.supplier_id,
            supplier_name: index2 != -1 ? this.supplierList[index2].supplier_name : "",
            settlement_num: index3 != -1 ? this.purchaseSettlementList[index3].bill_name : "",
            main_name: index4 != -1 ? this.companyList[index4].account_name : "",
            receive_name: index5 != -1 ? this.receiveList[index5].account_name : "",
            main_num: index4 != -1 ? this.companyList[index4].account_number : "",
            receive_num: index5 != -1 ? this.receiveList[index5].account_number : "",
            apply_type_name: index6 != -1 ? this.applyTypeList[index6].label : "",
          });
        }
      })

    },
    // 更新付款单
    updatePaymentOrder(obj) {
      this.addLoading = true;
      financeApi.updatePaymentOrder(obj).then(res => {
        console.log(res, "更新付款单")
        this.addLoading = false;
        if (res.code == 200) {
          this.dialogVisiblePayment = false;
          this.onSearch();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 添加付款单
    addPaymentOrder(obj) {
      this.addLoading = true;
      financeApi.addPaymentOrder(obj).then(res => {
        console.log(res, "添加付款单")
        this.addLoading = false;
        if (res.code == 200) {
          this.onSearch(1);
          this.cancelPaymentFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // ------------------------------------付款单列表--------------------------------------
    getPaymentOrder() {
      this.pageLoading = true;
      let formSearch = this.formSearch;
      financeApi.getPaymentOrder({
        page: this.page,
        num: this.num,
        to_do: this.to_do ? 1 : 0,
        project_name: formSearch.project_name || '',
        pay_type: formSearch.pay_type || '',
        settlement_id: formSearch.settlement_id,
        supplier_id: formSearch.supplier_id,
        project_number: formSearch.project_number || '',
        receive_id: formSearch.receive_id,
        apply_amount: formSearch.apply_amount || '',
        main_id: formSearch.main_id || '',
        payment_status: formSearch.payment_status || '',
        apply_type: formSearch.apply_type || '',
        apply_user_id: formSearch.apply_user_id,
        created_at_start: formSearch.created_at ? formSearch.created_at[0] : '',
        created_at_end: formSearch.created_at ? formSearch.created_at[1] : '',
        remarks: formSearch.remarks || '',
      }).then(res => {
        console.log(res, "付款单列表")
        this.pageLoading = false;
        if (res.code == 200) {
          this.tableData = res.data.list || [];
          this.total = res.data.max;
        }
      })
    },
    // ------------------------------------收款单列表--------------------------------------
    getReceiptList() {
      this.pageLoading = true;
      let formSearch = this.formSearch;
      companyApi.getReceiptList({
        page: this.page,
        num: this.num,
        to_do: this.to_do ? 1 : 0,
        reviewer_id: formSearch.reviewer_id || '',
        review_at_start: formSearch.review_at ? formSearch.review_at[0] : '',
        review_at_end: formSearch.review_at ? formSearch.review_at[1] : '',
        project_number: formSearch.project_number || '',
        amount_collected: formSearch.amount_collected || '',
        receiving_account_id: formSearch.receiving_account_id || '',
        review_status: formSearch.review_status || '',
        remark: formSearch.remark || '',
        project_name: formSearch.project_name || '',//跳转的筛选
        payment_type: formSearch.payment_type || '',
        brand_id: formSearch.brand_id || '',
      }).then(res => {
        console.log(res, "收款单列表")
        this.pageLoading = false;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.max;
        }
      })
    },
    // ---------------------------供应商列表------------------------------------
    getSupplier() {
      purchaseApi.getSupplier({
        page: 1,
        num: 999,
      }).then(res => {
        console.log(res, "供应商列表")
        if (res.code == 200) {
          this.supplierList = res.data.list;
        }
      })
    },
    // ---------------------------编辑按钮------------------------------------
    editFunc() {
      let multipleSelection = this.multipleSelection;
      this.formInlinePayment = multipleSelection[0];
      this.dialogVisiblePayment = true;
      this.payTypeChangeFunc();
      this.supplierChange();
    },
    // ---------------------------详情按钮------------------------------------
    detailFunc(row) {
      let multipleSelection = this.multipleSelection;
      switch (this.activeName) {
        case '1':
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: '/collectionPaymentSkdetailPage',
            query: {
              id: row.voucher_id,
              payment_type: row.payment_type
            }
          })
          break;
        case '2':
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: '/collectionPaymentFkdetailPage',
            query: {
              id: row.id,
              // pay_type_name: row.pay_type_name,
            }
          })
          break;
        default:
      }
    },
    // ----------------------------table点击行-选中----------------------------
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    // ---------------------------删除按钮------------------------------------
    delFunc() { },
    // ---------------------------审核通过或拒绝------------------------------------
    examineFunc() {
      let multipleSelection = this.multipleSelection;
      this.$router.push({ path: '/collectionPaymentFkdetailPage', query: { id: multipleSelection[0].id, examine: true } });
    },
    // 付款确认
    paySumitFunc() {
      let multipleSelection = this.multipleSelection;
      this.$router.push({ path: '/collectionPaymentFkdetailPage', query: { id: multipleSelection[0].id, examine: true } });
    },
    // --------------------------收款审核通过或拒绝------------------------------------
    // 收款审核
    collectionPaymentsFunc() {
      let multipleSelection = this.multipleSelection[0];
      console.log(multipleSelection)
      this.$router.push({ path: '/collectionPaymentSkdetailPage', query: { id: multipleSelection.voucher_id, payment_type: multipleSelection.payment_type, examine: true } });
    },
    // 导出付款单
    exportPaymentOrderFunc() {
      this.exportPaymentOrderVisible = true;
    },
    // 导出付款单确定
    exportPaymentOrderSubmitFunc() {
      let exportPaymentOrderVal = this.exportPaymentOrderVal;
      let exportPaymentOrderArr = this.exportPaymentOrderArr;
      let formSearch = this.formSearch;
      let field_list = [];//接口参数  字段名
      if (!exportPaymentOrderVal.length) {
        this.$message({
          type: 'warning',
          message: "请勾选需要导出的字段"
        })
        return;
      }
      exportPaymentOrderVal.forEach(item => {
        let index = exportPaymentOrderArr.findIndex(i => {
          return item == i.label;
        })
        field_list.push(exportPaymentOrderArr[index].value);
      })
      this.exportPaymentOrder({
        field_list,
        to_do: 0,
        project_id: formSearch.project_id,
        pay_type: formSearch.pay_type || '',
        settlement_id: formSearch.settlement_id,
        supplier_id: formSearch.supplier_id,
        receive_id: formSearch.receive_id,
        main_id: formSearch.main_id,
        payment_status: formSearch.payment_status,
        apply_type: formSearch.apply_type,
        apply_user_id: formSearch.apply_user_id,
        remarks: formSearch.remarks,
      })
    },
    // 导出付款单请求
    exportPaymentOrder(obj) {
      this.exportPaymentOrderLoading = true;
      financeApi.exportPaymentOrder(obj).then(res => {
        console.log(res, "导出付款单")
        this.exportPaymentOrderLoading = false;
        if (res.code == 200) {
          this.exportPaymentOrderUrl = res.data;
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 导出付款单取消
    exportPaymentOrderCloseFunc() {
      this.exportPaymentOrderVal = [];
      this.allChecked = false;
      this.exportPaymentOrderUrl = '';
      this.exportPaymentOrderVisible = false;
    },
    // 导出字段全选
    allCheckedChangeFunc(e) {
      // 付款单
      let exportPaymentOrderArr = this.exportPaymentOrderArr;
      let exportPaymentOrderVal = [];
      if (e) {
        exportPaymentOrderArr.forEach(item => {
          exportPaymentOrderVal.push(item.label);
        });
        this.exportPaymentOrderVal = exportPaymentOrderVal;
      } else {
        this.exportPaymentOrderVal = exportPaymentOrderVal;
      }
      // 收款单
      let exportReceiptExcelArr = this.exportReceiptExcelArr;
      let exportReceiptExcelVal = [];
      if (e) {
        exportReceiptExcelArr.forEach(item => {
          exportReceiptExcelVal.push(item.label);
        });
        this.exportReceiptExcelVal = exportReceiptExcelVal;
      } else {
        this.exportReceiptExcelVal = exportReceiptExcelVal;
      }
    },
    // 增项列表
    getChangeList(project_name) {
      increaseDecreaseItemsApi.getChangeList({
        page: 1,
        num: 999,
        increase_or_decrease: 1,
        project_name: project_name || ''
      }).then(res => {
        console.log(res, "增项列表")
        if (res.code == 200) {
          this.changeList = res.data.list;
        }
      })
    },
    // 收款单  收款类型选择
    paymentTypeChangeFunc() {
      let index = this.payTypeList.findIndex(item => {
        return item.id == this.formInlineReceipt.payment_type;
      })
      this.formInlineReceipt.project_id = '';
      this.formInlineReceipt.change_id = '';
      this.formInlineReceipt.settlementMsg = '';
      this.formInlineReceipt.receiving_account_id == '';
      this.selectProjectList(this.payTypeList[index]);
    },
    // 品牌列表
    getBrandList() {
      brandApi.getBrandList({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "品牌列表")
        if (res.code == 200) {
          this.brandList = res.data.list;
        }
      })
    },
    // 导出收款单
    exportReceiptExcelFunc() {
      // let 
      this.exportReceiptExcelVisible = true;
    },
    // 导出收款单取消
    exportReceiptExcelCloseFunc() {
      this.exportReceiptExcelVisible = false;
      this.allChecked = false;
      this.exportReceiptExcelVal = [];
      this.exportReceiptExcelUrl = '';
    },
    // 导出收款单确认
    exportReceiptExcelSubmitFunc() {
      let exportReceiptExcelVal = this.exportReceiptExcelVal;
      let exportReceiptExcelArr = this.exportReceiptExcelArr;
      let formSearch = this.formSearch;
      if (!exportReceiptExcelVal.length) {
        this.$message({
          type: 'warning',
          message: '请勾选需要导出的字段'
        })
        return;
      }
      let field_list = [];
      exportReceiptExcelVal.forEach(item => {
        let index = exportReceiptExcelArr.findIndex(child => {
          return item == child.label;
        })
        field_list.push(exportReceiptExcelArr[index].value);
      })
      this.exportReceiptExcel({
        field_list,
        reviewer_id: formSearch.reviewer_id,
        review_at_start: formSearch.review_at ? formSearch.review_at[0] : '',
        review_at_end: formSearch.review_at ? formSearch.review_at[1] : '',
        amount_collected: formSearch.amount_collected,
        receiving_account_id: formSearch.receiving_account_id,
        remark: formSearch.remark,
      })
    },
    // 导出收款单请求
    exportReceiptExcel(obj) {
      this.exportReceiptExcelLoading = true;
      companyApi.exportReceiptExcel(obj).then(res => {
        console.log(res, "导出收款单")
        this.exportReceiptExcelLoading = false;
        if (res.code == 200) {
          this.exportReceiptExcelUrl = res.data;
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 用户列表
    getAdminList() {
      adminApi.getAdminList({
        page: 1,
        num: 999,
        identity: 1,
        position_id_arr: [2]
      }).then(res => {
        console.log(res, '用户列表')
        if (res.code == 200) {
          this.financeList = res.data.list;
        }
      })
    },
    // 添加付款单时选择完供应商获取相关结算单列表
    supplierChange(e) {
      console.log(e, '供应商')
      if (!this.formInlinePayment.supplier_id) {
        return;
      }
      if (e) {
        this.formInlinePayment.settlement_id = '';
      }
      let supplierList = this.supplierList;
      let index = supplierList.findIndex(item => {
        return item.Id == this.formInlinePayment.supplier_id;
      })
      this.getPurchaseSettlement({
        page: 1,
        num: 999,
        supplier_id: this.formInlinePayment.supplier_id,
        supplier_name: supplierList[index].supplier_name,
        settlement_state: 2
      });//结算单列表
    },
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 页面权限
    getHtmlAuthority() {
      commonApi
        .getHtmlAuthority({
          path: this.$route.path,
        })
        .then((res) => {
          console.log(res, "页面权限");
          if (res.code == 200) {
            this.HtmlAuthority = res.data;
          }
        });
    },
    // 搜索
    onSearch(page) {
      page = typeof page == 'number' ? page : this.page;
      this.page = page;
      if (this.activeName == 1 || this.activeName == 3) {
        this.getReceiptList();
      } else {
        this.getPaymentOrder();
      }
    },
    // 翻页
    handleCurrentChange(page) {
      this.onSearch(page);
    },
    moreSearchFunc() {
      this.moreSearchShow = !this.moreSearchShow;
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    handleSelectionChange(e) {
      console.log(e);
      this.multipleSelection = e;
    },
    // tab点击
    tabClickFunc(e) {
      this.tableData = [];
      this.handleResize();
      this.onSearch(1);
      this.multipleSelection = [];
      this.exportPaymentOrderCloseFunc();
      this.exportReceiptExcelCloseFunc();
    },
    // 查看结算单详情
    goSettlementMsFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/settlemenDetailPage?id=" + this.formInlineReceipt.settlementMsg.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/listPage.scss';
</style>

<style lang="scss"></style>